import React, { useEffect } from 'react';
import { Layout, theme, Breadcrumb } from 'antd';
import { NavLink, Outlet, useLocation } from 'umi';
import StandBoxSider from '@/components/StandBoxSider';
import StandBoxHeader from '@/components/StandBoxHeader';
import NProgress from 'nprogress'; //打开页面时加载进度条
import 'nprogress/nprogress.css'; //打开页面时加载进度条样式

const { Content } = Layout;

export default function NewsStandBox() {
    //#region 打开页面时加载进度条显示与消失
    NProgress.start();
    useEffect(() => {
        NProgress.done();
    })
    //#endregion

    // 背景颜色:#ffffff
    const {
        token: { colorBgContainer },
    } = theme.useToken();

    //#region 映射 路由路径对应面包屑名称
    const breadcrumbNameMap: Record<string, string> = {
        '/home': '首页',
        '/user-manage': '用户管理',
        '/user-manage/list': '用户列表',
        '/right-manage': '权限管理',
        '/right-manage/role': '角色管理',
        '/right-manage/role/list': '角色列表',
        '/right-manage/right': '权限分配',
        '/right-manage/right/list': '权限列表',
        '/news-manage': '新闻管理',
        '/news-manage/draft': '草稿箱',
        '/publish-manage/sunset': '已下线',
        '/publish-manage/published': '已发布',
        '/publish-manage/unpublished': '待发布',
        '/audit-manage/list': '审核列表',
        '/audit-manage/audit': '审核新闻',
        '/news-manage/category': '新闻分类',
        '/news-manage/add': '撰写新闻',
        '/news-manage/list': '新闻列表',
        '/publish-manage': '发布管理',
        '/audit-manage': '审核管理',
        '/news-manage/preview': '新闻预览',
        '/news-manage/update': '新闻更新',
    };
    const location = useLocation();
    // 获取路由路径，然后以/作为分隔符，形成一个路由路径的数组 例如 user-manage/list =>['user-manage','list']
    const pathSnippets = location.pathname.split('/').filter((i) => i);
    //    根据路径生成一个Breadcrumb.Item的数组
    const extraBreadcrumbItems = pathSnippets.map((_, index) => {
        const url = `/${pathSnippets.slice(0, index + 1).join('/')}`;
        return (
            <Breadcrumb.Item key={url}>
                {/* <NavLink to={url}>{breadcrumbNameMap[url]}</NavLink> */}
                <span>{breadcrumbNameMap[url]}</span>
            </Breadcrumb.Item>
        );
    });
    //#endregion

    return (
        <>
            <Layout>
                {/* 侧边栏*/}
                <StandBoxSider></StandBoxSider>
                <Layout className="site-layout" style={{ marginLeft: 200 }}>
                    {/* 头部 */}
                    <StandBoxHeader></StandBoxHeader>

                    <Content style={{ margin: '16px 16px 0'}}>
                        <Breadcrumb style={{ margin: '0 0 5px 0' }}>
                            {extraBreadcrumbItems}
                        </Breadcrumb>
                        <div style={{ padding: 12, minHeight: '90%', background: colorBgContainer }}>
                            <Outlet></Outlet>
                        </div>
                    </Content>
                </Layout>
            </Layout>

        </>
    )
}
